<template>
  <lay-tab type="brief" v-model="_currentTab" class="form-designer-right-tab" @change="tabChange">
    <lay-tab-item title="表单属性" id="1"></lay-tab-item>
    <lay-tab-item title="组件属性" id="2"></lay-tab-item>
  </lay-tab>
  <lay-form v-if="formArray.length > 0 && chooseIndex > -1" v-show='currentTab == "2"'>
    <lay-form-item label="label:" :label-width="rightFormOptions.labelWidth">
      <lay-input v-model="formArray[chooseIndex].formItemProps.label" style="width: 90%;"></lay-input>
    </lay-form-item>
    <lay-form-item label="字段名:" :label-width="rightFormOptions.labelWidth">
      <lay-input v-model="formArray[chooseIndex].formItemProps.prop" style="width: 90%;"></lay-input>
    </lay-form-item>
    <lay-form-item label="是否禁用:" :label-width="rightFormOptions.labelWidth">
      <lay-radio-group v-model="formArray[chooseIndex].formItemProps.disabled">
        <lay-radio :value="true">是</lay-radio>
        <lay-radio :value="false">否</lay-radio>
      </lay-radio-group>
    </lay-form-item>
    <lay-form-item label="是否可清空:" v-if="ifHasAllowClear(formArray[chooseIndex].type)"
      :label-width="rightFormOptions.labelWidth">
      <lay-radio-group v-model="formArray[chooseIndex].formItemProps.allowClear">
        <lay-radio :value="true">是</lay-radio>
        <lay-radio :value="false">否</lay-radio>
      </lay-radio-group>
    </lay-form-item>
    <lay-form-item label="是否必填:" :label-width="rightFormOptions.labelWidth">
      <lay-radio-group v-model="formArray[chooseIndex].formItemProps.required">
        <lay-radio :value="true">是</lay-radio>
        <lay-radio :value="false">否</lay-radio>
      </lay-radio-group>
    </lay-form-item>
    <lay-form-item label="对齐方式:" :label-width="rightFormOptions.labelWidth">
      <lay-radio-group v-model="formArray[chooseIndex].formItemProps.labelPosition">
        <lay-radio value="top">top</lay-radio>
        <lay-radio value="left">left</lay-radio>
        <lay-radio value="right">right</lay-radio>
      </lay-radio-group>
    </lay-form-item>
    <lay-form-item label="label宽度:" :label-width="rightFormOptions.labelWidth">
      <lay-input-number :min="1" :step="5" v-model="formArray[chooseIndex].formItemProps.labelWidth"></lay-input-number>
    </lay-form-item>
    <lay-form-item label="组件尺寸:" v-if="ifHasSize(formArray[chooseIndex].type)"
      :label-width="rightFormOptions.labelWidth">
      <lay-radio-group v-model="formArray[chooseIndex].formItemProps.size">
        <lay-radio value="lg">lg</lay-radio>
        <lay-radio value="md">md</lay-radio>
        <lay-radio value="sm">sm</lay-radio>
        <lay-radio value="xs">xs</lay-radio>
      </lay-radio-group>
    </lay-form-item>
    <lay-form-item label="placeholer:" v-if="ifHasplaceholder(formArray[chooseIndex].type)"
      :label-width="rightFormOptions.labelWidth">
      <lay-input v-model="formArray[chooseIndex].formItemProps.placeholder" style="width: 90%;"></lay-input>
    </lay-form-item>
    <lay-form-item label="选项:" v-if="ifHasOptionItem(formArray[chooseIndex].type)" class="optionItems"
      :label-width="rightFormOptions.labelWidth">
      <div class="option-item" v-for="(item, i) in formArray[chooseIndex].formItemProps.options"
        :key="'option-item' + i">
        <lay-input v-model="item.label" placeholder="选项名"></lay-input>
        <lay-input v-model="item.value" placeholder="选项值"></lay-input>
        <ReduceCircleIcon style="cursor: pointer;" color='red'
          @click='formArray[chooseIndex].formItemProps.options.splice(i, 1)' />
      </div>
      <p class="add-option" @click="addOptions(chooseIndex)">添加选项</p>
    </lay-form-item>
    <lay-form-item label="选项Json:" v-if="formArray[chooseIndex].type === 'cascader'"
      :label-width="rightFormOptions.labelWidth">
      <lay-button @click="editInMonaco(formArray[chooseIndex].formItemProps.options, 'json', chooseIndex, 'options')">
        在Monaco中编辑😉</lay-button>
    </lay-form-item>
    <template v-if="formArray[chooseIndex].formItemProps.required">
      <lay-line>校验</lay-line>
      <lay-form-item label="校验类型:" :label-width="rightFormOptions.labelWidth">
        <lay-select v-model="formArray[chooseIndex].formItemProps.validateType">
          <lay-select-option value="string" label="string"></lay-select-option>
          <lay-select-option value="number" label="number"></lay-select-option>
          <lay-select-option value="regexp" label="regexp"></lay-select-option>
          <lay-select-option value="integer" label="integer"></lay-select-option>
          <lay-select-option value="float" label="float"></lay-select-option>
          <lay-select-option value="array" label="array"></lay-select-option>
          <lay-select-option value="enum" label="enum"></lay-select-option>
          <lay-select-option value="date" label="date"></lay-select-option>
          <lay-select-option value="url" label="url"></lay-select-option>
          <lay-select-option value="hex" label="hex"></lay-select-option>
          <lay-select-option value="email" label="email"></lay-select-option>
          <lay-select-option value="regexp" label="regexp"></lay-select-option>
          <lay-select-option value="enum" label="enum"></lay-select-option>
        </lay-select>
      </lay-form-item>
      <lay-form-item label="正则表达式:" :label-width="rightFormOptions.labelWidth"
        v-if="formArray[chooseIndex].formItemProps.validateType === 'regexp'">
        <lay-input v-model="formArray[chooseIndex].formItemProps.pattern" style="width: 90%;"></lay-input>
      </lay-form-item>
      <lay-form-item label="枚举值:" :label-width="rightFormOptions.labelWidth"
        v-if="formArray[chooseIndex].formItemProps.validateType === 'enum'" class="optionItems">
        <div class="option-item" v-for="(item, i) in formArray[chooseIndex].formItemProps.enumerable"
          :key="'enumerable-item' + i">
          <lay-input v-model="formArray[chooseIndex].formItemProps.enumerable[i]" placeholder="请输入枚举值"></lay-input>
          <ReduceCircleIcon style="cursor: pointer;" color='red'
            @click='formArray[chooseIndex].formItemProps.enumerable.splice(i, 1)' />
        </div>
        <p class="add-option" @click="formArray[chooseIndex].formItemProps.enumerable.push('')">添加选项</p>
      </lay-form-item>
      <lay-form-item label="校验提示:" :label-width="rightFormOptions.labelWidth">
        <lay-input v-model="formArray[chooseIndex].formItemProps.validateMsg" style="width: 90%;"></lay-input>
      </lay-form-item>
    </template>
  </lay-form>
  <lay-form v-show='currentTab == "1"' class="form-props">
    <lay-form-item label="表单名">
      <lay-input v-model="formProps.name" style="width: 90%;"></lay-input>
    </lay-form-item>
    <lay-form-item label="表单model名">
      <lay-input v-model="formProps.model" style="width: 90%;"></lay-input>
    </lay-form-item>
    <lay-form-item label="校验规则名">
      <lay-input v-model="formProps.rules" style="width: 90%;"></lay-input>
    </lay-form-item>
    <lay-form-item label="必填前缀:">
      <lay-icon-picker v-model="formProps.requiredIcons" type="layui-icon-face-smile"></lay-icon-picker>
    </lay-form-item>
  </lay-form>
</template>
<script lang="ts" setup>
import { ReduceCircleIcon } from '@layui/icons-vue';
import { formPropsType, formComponentsType } from '../components'
import { useDesigner } from "../useDesigner";
import { ref, watch } from 'vue';
import { computed } from '@vue/reactivity';

export interface centerFormProps {
  formProps: formPropsType,
  formArray: formComponentsType[],
  chooseIndex: number,
  currentTab: string,
}
const props = withDefaults(defineProps<centerFormProps>(), {});
const emit = defineEmits(['update:formArray', 'update:currentTab', 'editInMonaco'])
const { ifHasOptionItem, ifHasplaceholder } = useDesigner();
const _currentTab = ref('1')
const rightFormOptions = ref({
  labelWidth: 80
})
const tabChange = (value: string) => {
  emit('update:currentTab', value);
}
watch(() => props.currentTab, () => {
  _currentTab.value = props.currentTab
})
//添加选项 select radio checkbox
const addOptions = (chooseIndex: number) => {
  let data = props.formArray;
  data[chooseIndex].formItemProps.options.push({ label: "", value: "" });
  emit('update:formArray', data);
}

const ifHasAllowClear = computed(() => {
  return (type: string) => {
    const widthOutAllowClear = ['inputNumber', 'switch', 'radio', 'checkbox', 'colorPicker', 'slider'];
    if (widthOutAllowClear.includes(type)) {
      return false;
    }
    return true;
  }
})
const ifHasSize = computed(() => {
  return (type: string) => {
    const widthOutAllowClear = ['textarea', 'radio', 'checkbox', 'colorPicker', 'slider', 'rate'];
    if (widthOutAllowClear.includes(type)) {
      return false;
    }
    return true;
  }
})

const editInMonaco = (data: any, dataType: string, index: number, key: string) => {
  emit('editInMonaco', { data, dataType, index, key })
}
</script>